I'm looking at an example of how to use jqGrid, which is a jQuery plugin.
It's drawing a grid in a div with an id of 'list'.
It creates the grid with $('#list').jqGrid(...).
But it populates the grid with $('#list')[0].addJSONData(...).
I've been looking around the web for tutorials on jQuery, trying to understand the difference, and I've found nothing that addresses what is - to me - the most fundamental question in using it.
What does $() return? Does it return a jquery object that contains a DOM element? Does it return a jquery object that contains an array of DOM elements? Does it return a DOM element to which additional jQuery functions have been added?
And what then, is $()[0]? If $() returned a jQuery object that contained an array of DOM elements, I'd expect it to be the div with the id 'list', but addJSONData isn't a DOM method, it's a jqGrid method. Does jqGrid add that method to all of the DOM elements in the array?
===== ADDED ======
If $() returns a jquery object that contains an arrray of DOM objects, why does $()[0] refer to an object that contains an addJSONData method? addJSONData is not a DOM method, it's a jqGrid method.
Gregg :
$() returns a collection of elements based on the selector. So $('.help') would return all elements with a class of .help. $('.help')[0] would give you the first element.",
2010-12-03T18:25:40
01001111 :
$() is an alias for the jQuery() function. It returns a jQuery object and and elements that match the provided selector. If matched elements were found, $()[0] would give you the first DOM element.\n\nSee the jQuery documentation for a full explanation.",
2010-12-03T18:28:58
treeface :
The jQuery object, when used with a selector, returns an array of DOM elements. In this case, $('#list') represents an array (with one slot, since this is an ID) of items that match the ID '#list'. ",
2010-12-03T18:26:55
James Kovacs :
$() returns a jQuery object that contains a set of matched elements. Indexing into the jQuery object via $()[0] returns the first matched DOM object.\n\nvar docWrappedInJQuery = $('document');\nvar bareDoc = $('document')[0];\nassert((document === docWrappedInJQuery) === false);\nassert((document === bareDoc) === true);\n",
2010-12-03T18:28:38
Andreas Wong :
$() is a jquery selector, it takes css expression and turn it into jQuery object, $ is actually a shorthand of jQuery, i.e. jQuery() and $() are the same.\n\n$()[0] simply takes the non jQuery object, so if you do $('#someId')[0], it's the same as getElementById('someId');",
2010-12-03T18:27:27